<template>
  <div class="main">
    <div class="cardataadd">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡口车辆通行测试数据</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >操作按钮</el-button
          >
        </div>
        <div class="text item">
          <div class="left">
            <el-form
              :inline="true"
              :model="form"
              ref="form"
              class="demo-form-inline"
            >
              <el-form-item label="详细地址">
                <el-select v-model="location" placeholder="请选择">
                  <el-option
                    v-for="item in options1"
                    :key="item.id"
                    :label="item.area_name"
                    :value="item.area_name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属地区">
                <el-select v-model="areaname" placeholder="请选择">
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="车辆颜色">
                <el-select v-model="color" placeholder="请选择">
                  <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="车辆类型">
                <el-select v-model="type" placeholder="请选择">
                  <el-option
                    v-for="item in options4"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="车  牌  号">
                <el-input v-model="form.carnumber"></el-input>
              </el-form-item>
              <el-form-item label="用户姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="省份证号">
                <el-input v-model="form.idcard"></el-input>
              </el-form-item>
              <el-form-item label="日期">
                <div class="block">
                  <el-date-picker
                    v-model="time"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-button class="ruku" type="primary" @click="addKakoudatatest()"
                >入库</el-button
              >
              <el-button class="ruku" @click="resetForm('formI')"
                >重置</el-button
              >
            </el-form>
          </div>
          <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="percentage1"
          ></el-progress>
        </div>
      </el-card>
    </div>
    <div class="table">
      <el-table :data="tableData" height="400" border style="width: 100%">
        <el-table-column prop="time" label="日期"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="location" label="卡口位置"> </el-table-column>
        <el-table-column prop="carnumber" label="车牌号"> </el-table-column>
        <el-table-column prop="idcard" label="身份证号码"> </el-table-column>
        <el-table-column prop="area_name" label="地区"> </el-table-column>
        <el-table-column prop="color" label="颜色" width="50">
        </el-table-column>
        <el-table-column prop="type" label="车型" width="50"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getAreaname } from "@/api/data";
import { addKakoudatatest } from "@/api/data";
import { getKakoudata } from "@/api/data";
export default {
  data() {
    return {
      time: "",

      options1: [],
      location: "",

      form: {
        carnumber: "",
        name: "",
        idcard: ""
      },
      percentage1: 0,

      options2: [
        { value: "海北藏族自治州", label: "海北藏族自治州" },
        { value: "西宁市", label: "西宁市" },
        { value: "海东市", label: "海东市" },
        { value: "黄南藏族自治州", label: "黄南藏族自治州" },
        { value: "海南藏族自治州", label: "海南藏族自治州" },
        { value: "玉树藏族自治州", label: "玉树藏族自治州" },
        { value: "果洛藏族自治州", label: "果洛藏族自治州" },
        { value: "海西蒙古族藏族自治州", label: "海西蒙古族藏族自治州" }
      ],
      areaname: "",

      options3: [
        { value: "1", label: "红" },
        { value: "2", label: "橙" },
        { value: "3", label: "黄" },
        { value: "4", label: "绿" },
        { value: "5", label: "蓝" },
        { value: "6", label: "紫" },
        { value: "7", label: "黑" },
        { value: "8", label: "白" }
      ],
      color: "",

      options4: [
        { value: "9", label: "大众" },
        { value: "10", label: "红旗" },
        { value: "11", label: "五菱宏光" },
        { value: "12", label: "比亚迪" },
        { value: "13", label: "丰田" },
        { value: "14", label: "奥迪" },
        { value: "15", label: "宝马" },
        { value: "16", label: "福特" },
        { value: "17", label: "现代" }
      ],
      type: "",

      //Etc表格数据
      tableData: []
    };
  },
  created() {
    getAreaname("/data/getAreaname").then(res => {
      if (res.code === 200) {
        this.options1 = res.data;
      } else {
        this.$message(res.data);
      }
    });
    getKakoudata("/data/getKakoudata").then(res => {
      if (res.code === 200) {
        this.tableData = res.data;
      } else if (res.code === 500) {
        this.$message(res.data);
      }
    });
  },
  methods: {
    resetForm(formName) {
      this[formName] = {};
      this.$refs[formName].resetFields();
    },
    //增加etc车辆样例数据
    addKakoudatatest() {
      var params = {
        areaname: this.areaname,
        location: this.location,
        color: this.color,
        type: this.type,
        time: this.time,
        carnumber: this.form.carnumber,
        idcard: this.form.idcard,
        name: this.form.name
      };
      addKakoudatatest("/data/addKakoudatatest", params).then(res => {
        if (res.code === 200) {
          this.$message("数据增加成功");
          this.percentage1 = 100;
        } else {
          this.percentage1 = 50;
          this.$message(res.data);
        }
      });
    },

    //echarts1
    one() {},

    two() {}
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 700px;
  margin-top: 10px;
  border: 1px solid black;
}
.left {
  margin-top: 10px;
}
.cardataadd {
  width: 100%;
}
.ruku {
  float: right;
}
.table {
  width: 100%;
}
</style>
